<template>
  <div class="table">
    <el-dialog
      center
      title="导入商品"
      v-model="dialogVisible"
      :width="dialogWidth"
      size="mini"
      empty-text="当前没有数据"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="display: flex">
        <MainSearch
          @inputChange="inputSearch"
          placeholder="搜索商品名称"
        ></MainSearch>
        <div style="color: #9a9a9a; padding: 10px">
          已选择{{ GoodsLength }}件商品
        </div>
      </div>

      <el-table
        :data="tableDatas"
        height="500"
        style="width: 100%"
        @selection-change="handleSelect"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column align="center" label="图片" width="100">
          <template #default="scope">
            <img
              style="width: 88px; height: 88px"
              :src="scope.row.ImgUrl"
              alt=""
            />
          </template>
        </el-table-column>
        <template v-for="item in tableItems" :key="item.lable" align="center">
          <el-table-column align="center" v-bind="item">
            <template #default="scope">
              <slot :name="item.slotName" :row="scope.row">{{
                scope.row[item.prop]
              }}</slot>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <slot name="price"></slot>
      <div class="block-pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          v-model:currentPage="currentPage"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="totalPage"
        >
        </el-pagination>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changeVisibility(false)">取消</el-button>
          <el-button @click="addShop" type="primary">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import { ITableItem } from '../types'
import MainSearch from '@/components/main-header/src/main-search.vue'

export default defineComponent({
  components: { MainSearch },
  emits: ['myAddShop', 'handleCurrentChange', 'tableSearch'],
  props: {
    tableItems: {
      type: Array as PropType<ITableItem[]>,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    totalPage: {
      type: Number,
      default: 100,
    },
    dialogWidth: {
      type: String,
      default: '30%',
    },
  },
  setup(props, { emit }) {
    let GoodsIds: number[] = []
    // 显示
    let dialogVisible = ref(false)
    let tableDatas = ref()
    // 侦听数据变化
    watch(
      () => props.tableData,
      (newValue, oldValue) => {
        // console.log(newValue, oldValue)
        tableDatas.value = newValue
      },
      {
        immediate: true,
      },
    )
    // 发送事件
    const addShop = () => {
      emit('myAddShop', GoodsIds)
    }
    // 选择数据
    let GoodsLength = ref(0)
    const handleSelect = (val: any) => {
      GoodsIds = []
      val.forEach((item: any) => GoodsIds.push(item.GoodsId))
      console.log(GoodsIds)
      GoodsLength.value = GoodsIds.length
    }
    let currentPage = ref(1)
    // 分页事件
    const handleCurrentChange = (val: any) => {
      currentPage.value = val
      emit('handleCurrentChange', val)
      // console.log(props.tableData)
    }
    let inputValue = ref('')
    const inputSearch = (event: string) => {
      inputValue.value = event
      emit('tableSearch', event)
    }

    // 隐藏dialog
    function changeVisibility(e: boolean) {
      dialogVisible.value = e
    }
    return {
      dialogVisible,
      GoodsIds,
      currentPage,
      tableDatas,
      GoodsLength,
      inputValue,
      addShop,
      handleSelect,
      changeVisibility,
      handleCurrentChange,
      inputSearch,
    }
  },
})
</script>

<style scoped>
.block-pagination {
  padding: 20px 10px;
}
</style>
